<div class="sidebar" id="sidebar" style="width:{{sidebar_width}};">
    <div class="sidebar-header" id="sidebar-header" data-content="panel_head_home">
        <input type="text" id="searchInputSB" placeholder="Search..." autocomplete="off">
        <span class="clearIcon">&times;</span>
        <span class="searchCategoryIcon">C</span>
    </div>
    <div id="sidebar_views">
        <div class="view_button" id="switch_sidebar" title="Toggle Sidebar">☰</div>
        <div class="view_button" id="switch_home" data-content="home" title="Home"><svg xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"
                style="enable-background:new 0 0 100 100; fill:var(--input-text);" xml:space="preserve">
                <g>
                    <path
                        d="M29,82h13V63.1c0-1.7,1.3-3,3-3h10.3c1.7,0,3,1.3,3,3V82H71c1.7,0,3-1.3,3-3V43.2c0-0.8-0.3-1.6-0.9-2.1l-21-21   c-1.2-1.2-3.1-1.2-4.2,0l-21,21c-0.6,0.6-0.9,1.3-0.9,2.1V79C26,80.7,27.3,82,29,82z" />
                </g>
            </svg></div>
        <div class="view_button" id="switch_settings" title="Settings">⚙</div>
    </div>
    <div class="content_sidebar" id="content_sidebar_home" data-expanded="false" data-content="panel_content_home">


        <div id="spacer"></div>
        <label class="sb_label" id="sb_label_pinned">PINNED</label>
        <ul id="sidebarBookmarks"></ul>
        <label class="sb_label" id="sb_label_custom">CUSTOM NODES<button class="expand_node" title="Expand/Collapse">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" enable-background="new 0 0 52 52"
                    xml:space="preserve">
                    <path
                        d="M48,9.5C48,8.7,47.3,8,46.5,8h-41C4.7,8,4,8.7,4,9.5v3C4,13.3,4.7,14,5.5,14h41c0.8,0,1.5-0.7,1.5-1.5V9.5z" />
                    <path d="M48,39.5c0-0.8-0.7-1.5-1.5-1.5h-41C4.7,38,4,38.7,4,39.5v3C4,43.3,4.7,44,5.5,44h41c0.8,0,1.5-0.7,1.5-1.5
                        V39.5z" />
                    <path d="M30,29h4.5c0.8,0,1.5-0.7,1.5-1.5v-3c0-0.8-0.7-1.5-1.5-1.5H30c-0.6,0-1-0.4-1-1v-4.5c0-0.8-0.7-1.5-1.5-1.5
                        h-3c-0.8,0-1.5,0.7-1.5,1.5V22c0,0.6-0.4,1-1,1h-4.5c-0.8,0-1.5,0.7-1.5,1.5v3c0,0.8,0.7,1.5,1.5,1.5H22c0.6,0,1,0.4,1,1v4.5
                        c0,0.8,0.7,1.5,1.5,1.5h3c0.8,0,1.5-0.7,1.5-1.5V30C29,29.4,29.4,29,30,29z" />
                    <rect class="expand_node" style="opacity:0" x="0" y="0" width="52" height="52" />
                </svg>
            </button></label>
        <ul id="sidebarCustomNodes"></ul>
    </div>


    <div class="dragHandle" id="dragHandle"></div>
    <div id="previewDiv"></div>
    <div id="sb-modal-backdrop-settings" class="sb-modal-backdrop-settings sb_hidden"></div>
    <div id="sb_settingsDiv" class="sb_hidden">
        <h1>SideBar Settings</h1>
        <button id="sb_resetButton">Soft Reset</button>
        <button id="sb_factoryResetButton">Factory Reset</button>
    </div>
    <a href="#" id="sb_scrollToTopButton">
        <svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve">
            <path id="XMLID_224_"
                d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394
	l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393
	C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z" />
        </svg>
    </a>
    <div id="customMenu" class="custom-menu">
        <ul> </ul>
    </div>
</div>